import Popup from '../../popup/popup';
import { useState, useEffect } from "react";
import emitter from "../../../utils/event"
import "./formPopup.css";

function FormPopup(props) {
    const [show, setShow] = useState(false);
    const [title, setTitle] = useState("");
    const [index, setIndex] = useState(-1);
    const [prize, setPrize] = useState({
        text: "",
        object: "stone_coin",
        value: 0,
        type: "prize",
        checked: false,
        image: "",
        description: ""
    });
    const onClickCloseFormPop = () => {
        setShow(false);
    }
    const onClickSave = () => {
        props.save(prize, index);
        setShow(false);
    }
    const onChangeValue = (key, event) => {
        let image;
        if (key === "object" && event.target.value === "stone_coin") {
            image = ""
        } else {
            image = prize.image
        }
        setPrize({
            ...prize,
            image: image,
            [key]: event.target.value
        })
    }
    useEffect(() => {
        const openListener = emitter.addListener('openFormPopup', (title, oldPrize, index) => {
            setShow(true);
            setTitle(title);
            if (oldPrize) {
                setPrize(oldPrize);
                setIndex(index);
            }
            else {
                setPrize({
                    text: "",
                    object: "stone_coin",
                    value: 0,
                    type: "prize",
                    checked: false,
                    image: "",
                    description: ""
                })
            }
        })
        return () => {
            emitter.removeListener(openListener)
        }
    }, [])
    return (
        <Popup show={show}>
            <div className="pop-form-box">
                <div className="pop-form-main">
                    <div className="pop-form--header">
                        <span className="pop-form--header__title">
                            {title}
                        </span>
                        <span className="pop-form--header__closebtn" onClick={onClickCloseFormPop} >
                            <i className="byte-icon byte-icon--close iconfont icon-close">
                            </i>
                        </span>
                    </div>
                    <div className="pop-form--body">
                        <div className="text">
                            <label htmlFor="text">奖品名</label>
                            <input type="text" name="text" onChange={onChangeValue.bind(this, "text",)}
                                value={prize.text} />
                        </div>
                        <div className="object">
                            <label htmlFor="object">类型</label>
                            <select type="text" name="object" onChange={onChangeValue.bind(this, "object",)}
                                value={prize.object}>
                                <option value="stone_coin">矿石</option>
                                <option value="real">实物</option>
                            </select>
                        </div>
                        {
                            prize.object === "stone_coin" &&
                            <div className="value">
                                <label htmlFor="value">价值</label>
                                <input type="number" name="value" onChange={onChangeValue.bind(this, "value",)}
                                    value={prize.value} />
                            </div>
                        }
                        <div className="image">
                            <label htmlFor="image">图片</label>
                            <input type="text" name="image" onChange={onChangeValue.bind(this, "image",)}
                                value={prize.image}
                            />
                            {
                                prize.image !== "" &&
                                <img src={prize.image} alt="" />
                            }
                        </div>
                        <div>
                            <label htmlFor="description">描述</label>
                            <textarea type="textarea" name="description" onChange={onChangeValue.bind(this, "description",)}
                                value={prize.description} />
                        </div>
                    </div>
                    <div className="pop-form--footer">
                        <div className="pop-form--footer__btn" onClick={onClickSave}>
                            保存
                        </div>
                    </div>
                </div>
            </div>
        </Popup>
    );
}
export default FormPopup;